<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 60px">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <h2 class="text-center">账密登录界面</h2>
            <hr>
            <div class="form-group">
                <label for="id_username">用户名:</label>
                <input type="text" name="username" id="id_username" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_username">密码:</label>
                <input type="text" name="password" id="id_password" class="form-control">
            </div>
            <div class="form-group">
                <label for="id_code">图片验证码:</label>
                <div class="row">
                    <div class="col-md-4">
                        <input type="text" name="code" id="id_code" class="form-control">
                    </div>
                    <div class="col-md-8">
                        <img src="/user/get_code/" alt="" id="id_img" width="310" height="32">
                    </div>
                </div>
            </div>
            <br>
            <br>
            <input type="button" value="登录" class="btn btn-success" id="id_commit">
            <span style="color: red" id="error"></span>
            <hr>
            <a href="/user/register/" class="pull-right">注册>></a>
            <br>
            <hr>
            <a href="/user/phone_login/" class="pull-right">手机验证码登录>></a>

        </div>
    </div>
</div>


<script>
    // 绑定点击事件，通过改变src触发请求code
    $('#id_img').click(function (){
        let oldval = $(this).attr('src');  //拿到当前src属性
        $(this).attr('src', oldval += '?')  //点击后，改变src属性
    })

    //发送ajax请求
    $('#id_commit').click(function (){
        $.ajax({
            url:'',
            type: 'post',
            data:{
                'username': $('#id_username').val(),
                'password': $('#id_password').val(),
                'code': $('#id_code').val(),
                'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            success:function (args){
                console.log(args)
                if(args.code === 1000){
                    window.location.href = args.url
                }else{
                    $('#error').text(args.msg)
                }
            }
        })
    })
</script>
</body>
</html>